<template>
  <div class="common-form-wrapper">
    <!--订单表单-->
    <div class="common-form-container with-bottom-sticky-button">
      <OrderHeader ref="orderHeader" :supplier-id.sync="supplierId" :business-type.sync="businessType" :form="orderForm.header" />

      <OrderMember ref="orderMember" :total-price.sync="totalPrice" :form="orderForm.detail" />

      <OverseasPayment ref="overseasPayment" :supplier-id="supplierId" :total-price="totalPrice" :form="orderForm.overseasPayment" />

      <HKLogistics ref="hkLogistics" :supplier-id="supplierId" :form="orderForm.hkLogistics" />

      <InlandLogistics ref="inlandLogistics" :business-type="businessType" :form="orderForm.inlandLogistics" />

      <Other ref="other" :form="orderForm.other" />
    </div>
    <BottomFixedButtonContainer>
      <template slot="buttons">
        <el-button type="primary" @click="submitForm">暂存</el-button>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </template>
    </BottomFixedButtonContainer>
  </div>
</template>

<script>
import BottomFixedButtonContainer from '@/components/BottomFixedButtonContainer'
import OrderHeader from './components/orderHeader'
import OrderMember from './components/orderMember'
import OverseasPayment from './components/overseasPayment'
import HKLogistics from './components/HKLogistics'
import InlandLogistics from './components/inlandLogistics'
import Other from './components/other'
export default {
  name: 'BookingOrderCreate2',
  components: { OrderHeader, OrderMember, BottomFixedButtonContainer, OverseasPayment, HKLogistics, InlandLogistics, Other },
  data() {
    return {
      orderForm: {
        // 订单信息
        header: { settleId: '', supplier: '', currency: '', supplierContactId: '', appointContractNo: '', contractNo: '' },
        // 商品信息
        detail: { members: [] },
        // 境外结算
        overseasPayment: {
          payStyle: '', payFeeStyle: '', payAmount: undefined, ticketDay: undefined, termBillDay: undefined,
          // 供应商银行
          supplierBank: { id: '', accountName: '', accountNo: '', bankName: '', bankSwiftCode: '' }
        },
        // 香港物流
        hkLogistics: {
          arrivalType: '', pickType: '', pickTime: '', totalPallet: undefined, totalPackage: undefined, pickNo: '', overseasExpress: '', overseasExpressNo: '',
          // 提货地址
          pickAddress: { id: '', address: '', name: '', tel: '', phone: '' }
        },
        // 国内物流
        inlandLogistics: {
          receivingMode: '', deliveryType: '', expressCompany: { id: '', label: '', value: '' }, timelinessRequirement: '', shippingRequirement: '', deliveryMode: '',
          withInvoice: '',
          // 收货地址
          deliveryAddress: { id: '', address: '', name: '', tel: '', phone: '', withInvoice: '' },
          // 提货人
          pickPerson: { id: '', name: '', tel: '', phone: '', withInvoice: '' }
        },
        // 备注及其他
        other: {
          special: '', effectDeclarationPrice: '', remark: ''
        }
      },
      businessType: '', supplierId: '', totalPrice: 0
    }
  },
  created() {
  },
  methods: {
    submitForm2() {
      // 校验订单信息
      this.$refs.orderHeader.self().validate(valid1 => {
        if (valid1) {
          console.log('校验订单信息通过')
          // 校验商品信息
          this.$refs.orderMember.self().validate(valid2 => {
            if (valid2) {
              console.log('校验商品信息通过')
              // 校验境外结算
              this.$refs.overseasPayment.self().validate(valid3 => {
                if (valid3) {
                  console.log('校验境外结算通过')
                  // 校验香港物流
                  this.$refs.hkLogistics.self().validate(valid4 => {
                    if (valid4) {
                      console.log('校验香港物流通过')
                      // 校验国内物流
                      this.$refs.inlandLogistics.self().validate(valid5 => {
                        if (valid5) {
                          console.log('校验国内物流通过')
                          // 校验备注及其他
                          this.$refs.other.self().validate(valid6 => {
                            if (valid6) {
                              console.log('校验备注及其他通过')
                              console.log('提交表单', this.orderForm)
                            } else {
                              this.autoFocusFirstErrorItem()
                              return false
                            }
                          })
                        } else {
                          this.autoFocusFirstErrorItem()
                          return false
                        }
                      })
                    } else {
                      this.autoFocusFirstErrorItem()
                      return false
                    }
                  })
                } else {
                  this.autoFocusFirstErrorItem()
                  return false
                }
              })
            } else {
              this.autoFocusFirstErrorItem()
              return false
            }
          })
        } else {
          this.autoFocusFirstErrorItem()
          return false
        }
      })
    },
    submitForm() {
      this.$refs.other.self().validate(valid => {
        console.log(this.orderForm)
        if (valid) {
          console.log('通过')
        }
      })
    },
    autoFocusFirstErrorItem() {
      setTimeout(() => {
        // 获取校验错误的el-form-item
        var errorItems = document.getElementsByClassName('is-error')
        if (errorItems && errorItems.length > 0) {
          // 使错误的第一个获取焦点
          errorItems[0].querySelector('input').focus()
        }
      }, 100)
    }
  }
}
</script>
